<template>
  <div id="talentStar">
    <van-loading size="24px" vertical type="spinner" v-if="loading_01 && !talentList.length"
      >拼命加载中...</van-loading
    >
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="我是有底线的～"
      @load="onLoad"
      :immediate-check="false"
      v-if="!isNodata"
      ref="boxEl"
    >
      <template v-for="(item) in talentList">
        <van-swipe-cell :key="item.authorId" class="list_item_box" :before-close="beforeClose" :name="item.authorId">
          <div
            class="box"
            @click="talentdetails(item.authorId)"
          >
            <div class="head_box">
              <img :src="item.logo" :onerror="defaultImg" />
            </div>
            <div class="right">
              <div class="wid">
                <p class="name">
                  {{ item.nickName }}
                </p>
                <span class="type">{{ item.category }}</span>
              </div>
              <div class="total">
                <div>
                  <span>{{ format_num(item.totalFans) }}</span>
                  <span>粉丝总数</span>
                </div>
                <div>
                  <span>{{ format_num(item.totalFavorite) }}</span>
                  <span>点赞数</span>
                </div>

                <div>
                  <span>{{ format_num(item.totalVideo) }}</span>
                  <span>作品数</span>
                </div>
              </div>
            </div>
          </div>
          <template #right>
            <div class="cancel_collect"></div>
          </template>
        </van-swipe-cell>
      </template>
    </van-list>
    <div v-else>
      <img class="img" src="@/assets/three/noData.png" alt="" />
      <p class="Collection">您尚未收藏任何达人</p>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
import errorImg from "@/assets/img/superman.png"; //图片
export default {
  name: "",
  components: {},
  data() {
    return {
      page: 1,
      pageSize: 8,
      talentList: [],
      //触底
      loading: false,
      finished: false,
      isNodata: false,
      loading_01: false,
      errorImg: errorImg,
      isCloseConfirm:true, //是否关闭了确认弹框
    };
  },
  computed: {
    // 显示头像默认图片
    defaultImg() {
      return 'this.src="' + errorImg + '"';
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.GetTalentList();
  },

  methods: {
    beforeClose({position,instance,name}){ //取消收藏
      if(position == 'right'){
        this.isCloseConfirm = false;
        this.$dialog.confirm({
          message: '确认取消收藏？',
        }).then(() => {
          this.cancelStar(name).then(()=>{
            instance.$el.style.opacity = '0';
            instance.$el.style.height = '0';
            setTimeout(()=>{
              instance.close();
              this.talentList = this.talentList.filter((item)=>{
                return item.authorId != name;
              });
              this.isNodata = !this.talentList.length;

              let boxEl = this.$refs.boxEl.$el; //列表容器
              let elH = boxEl.clientHeight; //列表容器高度
              let elTop = boxEl.offsetTop;  //列表容器距离顶部高度
              let winH = this.$getClientHeight(); //窗口高度
              let itemElH = instance.$el.clientHeight;
              if(elH <= winH-elTop+itemElH*2 && !this.finished){ //滑动取消到容器高度不足 一屏外加两个子元素项容器的高度时，加载下一页
                this.page += 1;
                this.GetTalentList();
              }
            },200);
            this.isCloseConfirm = true;
          });
        }).catch((res)=>{
          this.isCloseConfirm = true;
          instance.close();
          // console.log(res);
        });
      }else if(position == 'outside' && this.isCloseConfirm){ //有确认弹框的时候不能隐藏
        instance.close();
      }
    },
    // 取消收藏
    cancelStar(authorId) {
      return new Promise((resolve, reject)=>{
        let that = this;
        that.$axios
          .post('/api/collection/CancelCollection',
            { 
              CollectId: authorId,
              Module: 1 //模块 1达人 2视频 3音乐 4话题 5商品
            }
          )
          .then(res => {
            if (res.data.code == 0) {
              resolve();
            }
          })
          .catch(err => {
            reject();
            console.log(err);
          });
      })
    },
    // cancelCollect(itemData){  //取消收藏
    //   console.log(itemData);
    // },
    //跳转
    talentdetails(id) {
      this.$router.push({ path: "/talentDetailsMain", query: { id } });
    },
    //接口数据
    GetTalentList() {
      // this.loading = true;
      this.loading_01 = true;
      this.$axios
        .get("/api/collection/GetAuthorsCollection", {
          params: {
            pageIndex: this.page,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.talentList = this.talentList.concat(res.data.data);
            // console.log(res.data.data);
            this.loading = false;
            this.loading_01 = false;
            if (!res.data.data.length || res.data.data.length < this.pageSize) {
              this.finished = true;
            }
          } else if (res.data.code == 1002) {
            this.loading = false;
            this.isNodata = true;
            this.loading_01 = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //触底
    onLoad() {
      this.loading = true;
      // if (this.page * this.pageSize > this.talentList.length) {
      //   if (this.talentList.length == 0) {
      //     this.loading = false;
      //     this.finished = false;
      //   } else {
      //     this.loading = false;
      //     this.finished = true;
      //   }
      // } else if (this.talentList.length > 0) {
      //   this.page = this.page + 1;
      //   this.GetTalentList();
      // }
      if(!this.finished){
        this.page += 1;
        this.GetTalentList();
      }
    },
  },
};
</script>

<style lang="less" scoped>
//@import url();
.list_item_box{
  // height: 2.266667rem;
  height:2.3267rem;
  border-radius: 0.133333rem;
  background-color: #ffffff;
  margin-bottom: 0.2rem;
  overflow: hidden;
  transition: all linear 200ms;
  opacity: 1;
}
#talentStar {
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 .2667rem;
  .van-list{
    width: 100%;
  }
  .box {
    display: flex;
    padding-bottom: .3rem;
    .head_box {
      width: 1.173333rem;
      height: 1.173333rem;
      border-radius: 50%;
      overflow: hidden;
      margin: 0.26666rem 0 0 0.3rem;
      flex-shrink: 0;
      font-size: 0;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .cancel_collect{
    display: flex;
    width: 1.9733rem;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: #fd7f2c;
    &:after{
      content: '';
      width: .4533rem;
      height: .5333rem;
      background-image: url('~@/assets/img/collect_delete.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
  .right {
    padding-left: 0.3rem;
  }
  .wid {
    display: flex;
    height: 0.666667rem;
    line-height: 0.666667rem;
    position: relative;
    top: 0.373333rem;
  }
  .name {
    max-width: 4.933333rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 0.666667rem;
    font-size: 0.4rem;
    letter-spacing: 0.013333rem;
    color: #222222;
  }
  .type {
    padding: 0 0.133333rem;
    height: 0.473333rem;
    line-height: 0.486666rem;
    background-color: #fff1e7;
    border-radius: 0.226667rem;
    border: solid 0.013333rem #fd7f2c;
    position: relative;
    top: 0.08rem;
    margin-left: 0.133333rem;
    font-size: 0.306667rem;
    color: #fd7f2c;
  }
  .total {
    display: flex;
    font-family: Dinpro-medium;
    font-size: 0.373333rem;
    margin-top: 0.4rem;
  }
  .total div {
    width: 1.36rem;
    padding-right: 1.093333rem;
  }
  .total div span:nth-child(1) {
    display: block;
    font-family: Dinpro-medium;
  }
  .total div span:nth-child(2) {
    font-size: 0.293333rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.4rem;
    letter-spacing: 0px;
    color: #888888;
  }
  //解决下拉刷新与标题切换问题
  .van-pull-refresh {
    overflow: auto !important;
  }
  /*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .img {
    width: 4rem;
    height: 3.2rem;
    margin-top: 4rem;
    display: block;
  }
  .Collection {
    font-size: 0.373333rem;
    line-height: 0.4rem;
    color: #888888;
    text-align: center;
  }
}
</style>
